<template>
  <view class="vip-wrap" v-if="!userInfo.invite_code">
    <view class="vip-wrap-l">
      <view class="vip-wrap-l-1">
        <image src="@/static/img/home-icon-3.png"></image>
        <text>￥{{ user.issue_price }}元激活居民身份</text>
      </view>
      <view class="vip-wrap-l-2">开通享受收益权益</view>
    </view>
    <view class="vip-wrap-r" @click="handleSubmit"
    >立即开通
    </view>
  </view>
</template>
<script setup>
  //创建订单
  import sheep from '@/sheep';
  import { computed, onMounted, reactive, ref } from 'vue';
  const userInfo = computed(() => sheep.$store('user').userInfo);

  let user = ref({
    'id': '', //藏品ID
    'type': '', //藏品类型
    'title': '', //藏品标题
    'image': null, //藏品图标
    'images': null, //藏品图片
    'issue_price': '', //价格
    'type_text': '', //藏品类型表述
  });
  onMounted(async () => {
    getlist();
  });
  const getlist = async () => {
    const { code, data } = await sheep.$api.collection.identityGoods({
      identity_type: 'citizens',
    });
    if (code === 1) {
      user.value = { ...data }
      // let item = data.filter((item) => item.title === '城市居民');
      // console.log(item);
      // if (item && item.length > 0) {
      //   user = { ...item[0] };
      // }
    }
  };
  const handleSubmit = async () => {
    sheep.$router.go('/pages/inherit/collect', {
      id: user.value.id,
    });
    // const { code, data } = await sheep.$api.order.activeIdentity();
    // if (code === 1) {
    //   let order = data;
    // }
  };

</script>

<style scoped lang="scss">
  .vip-wrap {
    margin: 50rpx 30rpx 30rpx;
    height: 120rpx;
    background: #1E1E1E;
    border-radius: 20rpx;
    padding: 10rpx 30rpx;
    @include flex();

    .vip-wrap-l {
      .vip-wrap-l-1 {
        @include flex(center, none);

        font-weight: 500;
        font-size: 30rpx;
        color: #E5C082;

        image {
          width: 33rpx;
          height: 31rpx;
          margin-right: 15rpx;
        }
      }

      .vip-wrap-l-2 {
        margin-top: 22rpx;

        font-weight: 400;
        font-size: 22rpx;
        color: #7B7B7B;
      }
    }

    .vip-wrap-r {
      width: 152rpx;
      height: 50rpx;
      background: linear-gradient(90deg, #DAB36F, #FFDFAF);
      border-radius: 10rpx;

      font-weight: 400;
      font-size: 22rpx;
      color: #1E1E1E;
      @include flex(center, center);
    }
  }

</style>
